/* Reset básico */
* {
    margin: 0;
    padding: 0;
}

/* Estilos para a seção principal */
#section-menu-todosconectados-inicio {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Div principal que envolve os dois lados */
.div-section-menu-todosconectados-inicio {
    display: flex;
    width: 100%;
    max-width: 1800px; /* Ajuste conforme necessário */
}

/* Container da esquerda */
.container-esquerda-section-menu-todosconectados {
    padding-top: 80px;
    padding-left: 90px;
    background-color: #15403D;
    width: 38%; /* Ocupa metade da tela */
    display: flex;
    flex-direction: column;
}


.text-section-menu-todosconectados-titulo-esquerda {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 56px;
    line-height: normal;
  
}

.text-section-menu-todosconectados-subtitulo-esquerda{
    font-size: 22px;
    margin-top: 10px;
    color: #FCD3C3;
    line-height: 1.4;
}

.text-section-menu-todosconectados-texto-esquerda {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.8em;
    margin-top: 30px;
}


/* Container da direita */
.container-direita-section-menu-todosconectados {
    width: 62%; /* Ocupa metade da tela */
    padding-left: 50px;
    padding-top: 85px;
    background-color: #ECD09E;
    align-items: left;
    text-align: left;
}

/* Estilização de títulos do lado direito */
.text-section-menu-todosconectados-titulo-infraestrutura,
.text-section-menu-todosconectados-titulo-educacao,
.text-section-menu-todosconectados-titulo-aceitacao{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #D6786B;
}

.text-section-menu-todosconectados-titulo-instituicoes,
.text-section-menu-todosconectados-titulo-financiamento,
.text-section-menu-todosconectados-titulo-pessoas{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #15403D;
}

.text-section-menu-todosconectados-titulo-tecnologia,
.text-section-menu-todosconectados-titulo-tempo,
.text-section-menu-todosconectados-titulo-estimulos {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
}

/* Estilização do texto dentro do lado direito */
.text-section-menu-todosconectados-texto-a,
.text-section-menu-todosconectados-texto-universidades,
.text-section-menu-todosconectados-texto-o,
.text-section-menu-todosconectados-texto-fritz,
.text-section-menu-todosconectados-texto-no,
.text-section-menu-todosconectados-texto-ob,
.text-section-menu-todosconectados-texto-um,
.text-section-menu-todosconectados-texto-desde {
    margin-top: 10px;
    text-align: justify;
    color: #000000;
    font-size: 14px;
    line-height: 1.8em;
    letter-spacing: normal;
}

/* Imagens ajustadas para responsividade */
.container-direita-section-menu-todosconectados img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 6px;
}

/* Legendas das imagens */
.text-section-menu-todosconectados-legenda-vapor,
.text-section-menu-todosconectados-legenda-universidade,
.text-section-menu-todosconectados-legenda-posse{
    text-align: left;
    color: #D6786B;
    font-size: 10px;
    margin-bottom: 80px;
    line-height: 1.3em;
}

.text-section-menu-todosconectados-legenda-palacio,
.text-section-menu-todosconectados-legenda-clientes,
.text-section-menu-todosconectados-legenda-john{
    text-align: left;
    color: #15403D;
    font-size: 10px;
    margin-bottom: 80px;
    line-height: 1.3em;
}

.text-section-menu-todosconectados-legenda-john i, .text-section-menu-todosconectados-legenda-clientes i{
    color: #15403D;
    font-size: 10px;
    font-style: italic;
}


.text-section-menu-todosconectados-legenda-experimentos,
.text-section-menu-todosconectados-legenda-darwin,
.text-section-menu-todosconectados-legenda-d {
    text-align: left;
    color: #ffffff;
    font-size: 10px;
    margin-bottom: 80px;
    line-height: 1.3em;
}

.text-section-menu-todosconectados-legenda-d i, .text-section-menu-todosconectados-legenda-experimentos i{
    color: #ffffff;
    font-size: 10px;
    font-style: italic;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .div-section-menu-todosconectados-inicio {
        flex-direction: column;
    }

    .container-esquerda-section-menu-todosconectados,
    .container-direita-section-menu-todosconectados {
        width: 91%;
        padding: 20px;
    }
}